<template>
    <div class="city_body">
        <div class="city_list">
            <div class="city_hot">
                <h2>热门城市</h2>
                <ul class="clearfix">
                    <li v-for="hotcitylist in hotcity" :key="hotcitylist.cityId" @click="handleToCity(hotcitylist.name, hotcitylist.cityId)">{{hotcitylist.name}}</li>
                </ul>
            </div>
            <div class="city_sort" ref="city_sort">
                <div v-for="data in datalist" :key="data.index">
                    <h2>{{data.index}}</h2>
                    <ul>
                        <li v-for="city in data.list" :key="city.cityId" @click="handleToCity(city.name, city.cityId)">{{city.name}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="city_index">
            <ul>
                <li @click="handleToIndex(index)" v-for="(data, index) in datalist" :key="index">{{data.index}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'city',
    data(){
        return {
            datalist: [],
            hotcity: []
        }
    },
    methods:{
        forCityList(data){
            var index = [];
            for(var i = 65; i < 91; i++){
                index.push(String.fromCharCode(i));
            }
            var citylist = [];
            for(var j = 0; j < index.length; j++){
                var listArr = data.filter((item)=>{
                    return item.pinyin.charAt(0) === index[j].toLowerCase();
                });
                if(listArr.length){
                    citylist.push({index: index[j], list: listArr});
                }
            }
            return citylist
        },
        forHotCity(data){
            var hotcitylist = [];
            hotcitylist = data.filter(item=>item.isHot === 1);
            return hotcitylist;
        },
        handleToIndex(index){
            var h2 = this.$refs.city_sort.getElementsByTagName('h2');
            this.$refs.city_sort.parentNode.scrollTop = h2[index].offsetTop;// scrollTop好像不需要px单位
        },
        handleToCity(name, id){
            this.$store.commit('city/CITY_INFO', {name, id});
            localStorage.setItem('cityId', id);
            localStorage.setItem('cityName', name)
            this.$router.push('/movie/nowplaying')
        }
    },
    mounted(){
        var cityList = JSON.parse(localStorage.getItem('cityList'));
        var hotCityList = JSON.parse(localStorage.getItem('hotCityList'));
        if(cityList && hotCityList){
            this.datalist = cityList;
            this.hotcity = hotCityList;
            return;
        }
        var config = {
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16095037913302396058927105","bc":"110100"}',
                'X-Host': 'mall.film-ticket.city.list'
            }
        }
        this.axios.get('https://m.maizuo.com/gateway?k=8272152', config).then(res=>{
            if(res.data.msg === 'ok'){
                this.datalist = this.forCityList(res.data.data.cities);
                this.hotcity = this.forHotCity(res.data.data.cities);
                localStorage.setItem('cityList', JSON.stringify(this.datalist));
                localStorage.setItem('hotCityList', JSON.stringify(this.hotcity));
            }
        })
    }
}
</script>

<style scoped>
#content .city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
.city_body .city_list::-webkit-scrollbar{
    background-color:transparent;
    width:0;
}
.city_body .city_hot{ margin-top: 20px;}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;}
</style>